<template>
  <div>
    <div class="mui-content">
      <form id="login-form" class="mui-input-group">
        <div class="mui-input-row">
          <label>账号</label>
          <input
            v-model="username"
            id="account"
            type="text"
            class="mui-input-clear mui-input"
            placeholder="请输入账号"
          />
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input
            v-model="password"
            id="password"
            type="password"
            class="mui-input-clear mui-input"
            placeholder="请输入密码"
          />
        </div>
      </form>

      <div class="mui-content-padded">
        <button
          id="login"
          @click="login"
          type="button"
          class="mui-btn mui-btn-block mui-btn-primary"
        >
          登录
        </button>
        <div class="link-area">
			<a  @click="register" id="reg">还没有账号？前往注册</a>
		</div>
      </div>
      <div class="mui-content-padded oauth-area"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      //请求后端登录接口
      this.$http
        .post("login", { username: this.username, password: this.password })
        .then((res) => {
            console.log(res.data)
            this.$toast(res.data.msg)
            if(res.data.code == 1){
                //跳回我的页
                this.$router.push('/user')
                // this.$store.state.id = res.data.data.id
                // this.$store.state.username = res.data.data.username
                this.$store.commit("addUser",res.data.data)
                //把session_id 保存到本地
                localStorage.setItem("A",res.data.data.session_id)
            }
        });
    },
	register() {
		this.$router.push('/user/register')
	}
  }
	
};
</script>

<style>
/* 	.mui-input-group {
	  margin-top: 10px;
	  background-color: transparent;
	}
	.mui-input-group label {
	  width: 22%;
	}
	.mui-input-row:last-child {
	  background: #fff;
	}
	.mui-input-row {
	  margin-top: 20px;
	  background: #fff;
	}
	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
	  width: 78%;
	}
	.link-area {
	  display: block;
	  margin-top: 25px;
	  text-align: center;
	}
	.mui-content-padded {
	  margin-top: 30px;
	} */
	
</style>